import React from "react";
import {findDOMNode} from 'react-dom';
import {
    Image,
    NativeSyntheticEvent,
    NativeTouchEvent,
    Platform,
    StyleSheet,
    TouchableOpacity,
} from "react-native";
import {NavigationScreenProp} from "react-navigation";
import {globalStore} from "../../libs/ShareStore";
import {Resource} from "../../resource/Resource";


export type ENavigationButtonProp = {
    navigation?:NavigationScreenProp<any, any>|any,
    style?:any,
    onPress?: (ev: NativeSyntheticEvent<NativeTouchEvent>, navigation:NavigationScreenProp<any, any>) => void;
    color?: string;
}

export type ENavigationButtonState = {

}

export default class ENavigationButton<P extends ENavigationButtonProp, S extends ENavigationButtonState> extends React.Component<P, S> {
    constructor(props:P) {
        super(props);
    }

    protected getRelationPageParams(){
        if(Platform.OS === 'web') {
            // @ts-ignore
            const dom = findDOMNode(this)!.parentNode!.parentNode! as Element;
            if (dom) {
                const paramsKey = dom.getAttribute('id') as any;
                return globalStore.webNavigatorKeyValue.hasOwnProperty(paramsKey) ? globalStore.webNavigatorKeyValue[paramsKey] : {};
            }
            return {}
        }
        else {
            return this.props.navigation.state.params;
        }
    }

    protected onPress(ev: NativeSyntheticEvent<NativeTouchEvent>, navigation:NavigationScreenProp<any, any>){
        if(this.props.onPress){
            this.props.onPress(ev, navigation);
        }
    }


    render() {
        return (
            <TouchableOpacity activeOpacity={1} onPress={(e) => this.onPress(e, this.props.navigation)}>
               <Image style={styles.btn}  source={Resource.align} />
            </TouchableOpacity>
        );
    }
}

let styles = StyleSheet.create({
    btn:{
        width: 16,
        height: 16,
        marginRight:12
    },
});
